Web Komponent Hayot Sikli: Maxsus Elementlarni Yaratish va Boshqarish

Web Komponentlar - bu dasturchilarga qayta ishlatiladigan, inkapsulyatsiyalangan va o'zaro mos keladigan maxsus HTML elementlarini yaratish imkonini beruvchi kuchli veb-standartlar to'plami. Ushbu komponentlarning hayot siklini tushunish mustahkam va qo'llab-quvvatlanadigan veb-ilovalar yaratish uchun juda muhimdir. Ushbu keng qamrovli qo'llanma Web Komponent hayot siklining turli bosqichlarini amaliy misollar va eng yaxshi amaliyotlar bilan chuqur o'rganadi.

Web Komponentlar nima?

Web Komponentlar - bu sizga inkapsulyatsiyalangan uslub va mantiqqa ega qayta ishlatiladigan maxsus HTML elementlarini yaratish imkonini beruvchi texnologiyalar to'plami. Ular uchta asosiy spetsifikatsiyadan iborat:

• Maxsus Elementlar: Maxsus funksionallikka ega o'z HTML elementlaringizni aniqlang.
• Shadow DOM: Komponentning ichki tuzilishi, uslubi va xatti-harakatini inkapsulyatsiya qilib, uni o'rab turgan hujjat aralashuvidan himoya qiladi.
• HTML Andozalari: Qayta ishlatiladigan HTML belgilash qismlarini aniqlash imkonini beradi.

Ushbu texnologiyalar dasturchilarga asosiy freymvorkdan qat'i nazar, har qanday veb-ilovaga osongina integratsiya qilinadigan o'z-o'zini ta'minlaydigan, qayta ishlatiladigan UI komponentlarini yaratish imkonini beradi. Saralash, filtrlash va sahifalashni boshqaradigan maxsus <data-grid> elementini yoki global ro'yxatdan mamlakatlarni tanlash uchun qulay interfeysni ta'minlaydigan <country-selector> elementini yaratishni tasavvur qiling. Web Komponentlar buni amalga oshirishga imkon beradi.

Web Komponent Hayot Sikli

Web Komponentning hayot sikli uning mavjudligining turli bosqichlarini, ya'ni yaratilishidan olib tashlanishigacha bo'lgan davrni tavsiflaydi. Ushbu bosqichlarni tushunish sizga ma'lum hodisalarga ulanish va komponentning xatti-harakati va holatini samarali boshqarish uchun zarur amallarni bajarish imkonini beradi.

To'rtta asosiy hayot sikli qayta chaqiruvlari (callbacks) mavjud:

• connectedCallback
• disconnectedCallback
• attributeChangedCallback
• adoptedCallback

1. connectedCallback

connectedCallback maxsus element hujjatning DOMiga ulanganda chaqiriladi. Bu odatda element hujjatga qo'shilganda yoki hujjatning bir qismidan boshqasiga ko'chirilganda sodir bo'ladi. Bu quyidagilar uchun ideal joy:

• Komponent holatini ishga tushirish.
• Hodisa tinglovchilarini (event listeners) biriktirish.
• Tashqi manbadan ma'lumotlarni olish.
• Komponentning dastlabki UI'sini render qilish.

Misol:

            class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadow.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #ccc;
          padding: 10px;
        }
      </style>
      <p>MyComponent'dan salom!</p>
    `;

    // Ma'lumotlarni olish misoli (o'zingizning haqiqiy API manzilingiz bilan almashtiring)
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // Ma'lumotlarni qayta ishlash va komponent UI'sini yangilash
        const dataElement = document.createElement('p');
        dataElement.textContent = `Ma'lumotlar: ${JSON.stringify(data)}`;
        this.shadow.appendChild(dataElement);
      });
  }
}

customElements.define('my-component', MyComponent);

            

              
                Copy
              
            
          

Ushbu misolda, connectedCallback komponentga Shadow DOM biriktiradi, dastlabki HTML'ni render qiladi va tashqi API'dan ma'lumotlarni oladi. Keyin u olingan ma'lumotlar bilan Shadow DOM'ni yangilaydi.

2. disconnectedCallback

disconnectedCallback maxsus element hujjatning DOMidan uzilganda chaqiriladi. Bu odatda element hujjatdan olib tashlanganda yoki boshqa hujjatga ko'chirilganda sodir bo'ladi. Bu quyidagilar uchun ideal joy:

• Resurslarni tozalash.
• Hodisa tinglovchilarini olib tashlash.
• Kutilayotgan har qanday so'rovlarni bekor qilish.

Misol:

            class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.eventListener = null; // Hodisa tinglovchisini saqlash
  }

  connectedCallback() {
    // ... (oldingi kod) ...

    // Misol: O'lchamni o'zgartirish hodisasi tinglovchisini qo'shish
    this.eventListener = () => {
      console.log('Komponent o\'lchami o\'zgartirildi!');
    };
    window.addEventListener('resize', this.eventListener);
  }

  disconnectedCallback() {
    // O'lchamni o'zgartirish hodisasi tinglovchisini olib tashlash
    if (this.eventListener) {
      window.removeEventListener('resize', this.eventListener);
      this.eventListener = null;
    }

    console.log('Komponent uzildi!');
  }
}

            

              
                Copy
              
            
          

Ushbu misolda, disconnectedCallback connectedCallback'da qo'shilgan o'lchamni o'zgartirish hodisasi tinglovchisini olib tashlaydi, bu esa xotira sizib chiqishini va komponent DOM'dan olib tashlanganidan keyin kutilmagan xatti-harakatlarning oldini oladi.

3. attributeChangedCallback

attributeChangedCallback maxsus elementning kuzatiladigan atributlaridan biri qo'shilganda, olib tashlanganda, yangilanganda yoki almashtirilganda chaqiriladi. Atributlarni kuzatish uchun maxsus element sinfida statik observedAttributes getter'ini aniqlash kerak. Ushbu qayta chaqiruv komponent konfiguratsiyasidagi o'zgarishlarga javob berish uchun juda muhimdir.

Misol:

            class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
  }

  static get observedAttributes() {
    return ['message', 'country'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`Atribut ${name} ${oldValue} dan ${newValue} ga o'zgartirildi`);

    if (name === 'message') {
      this.shadow.querySelector('p').textContent = newValue;
    } else if (name === 'country') {
       //Tanlangan mamlakat kodiga asoslanib bayroq rasmini olishni tasavvur qiling
       let flagURL = `https://flagcdn.com/w40/${newValue}.png`;
       let img = this.shadow.querySelector('img');
       if(!img){
          img = document.createElement('img');
          this.shadow.appendChild(img);
       }
       img.src = flagURL;
       img.alt = `${newValue} bayrog'i`;
    }
  }

  connectedCallback() {
    this.shadow.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #ccc;
          padding: 10px;
        }
      </style>
      <p>MyComponent'dan salom!</p>
      <img style="width:40px;"/>
    `;

    // Agar mavjud bo'lsa, atributdan dastlabki xabarni o'rnatish
    if (this.hasAttribute('message')) {
      this.shadow.querySelector('p').textContent = this.getAttribute('message');
    }
  }
}

customElements.define('my-component', MyComponent);

            

              
                Copy
              
            
          

Ushbu misolda komponent message va country atributlarini kuzatadi. message atributi o'zgarganda, attributeChangedCallback Shadow DOM ichidagi paragraf elementining matn tarkibini yangilaydi. country atributi o'zgarganda esa, u bayroq rasmini oladi va `img` elementini yangilaydi.

Ushbu komponentdan foydalanish uchun siz quyidagi HTML'ni yozishingiz kerak bo'ladi:

            <my-component message="Salom Dunyo!" country="gb"></my-component>
            

              
                Copy
              
            
          

Keyin siz JavaScript yordamida atributni dinamik ravishda o'zgartirishingiz mumkin:

            const myComponent = document.querySelector('my-component');
myComponent.setAttribute('message', 'Yangilangan Xabar!');
myComponent.setAttribute('country', 'us'); //mamlakat bayrog'ini o'zgartirish

            

              
                Copy
              
            
          

4. adoptedCallback

adoptedCallback maxsus element yangi hujjatga ko'chirilganda chaqiriladi. Bu odatda element bir iframe'dan boshqasiga ko'chirilganda sodir bo'ladi. Ushbu qayta chaqiruv boshqa hayot sikli qayta chaqiruvlariga qaraganda kamroq qo'llaniladi, ammo u quyidagilar uchun foydali bo'lishi mumkin:

• Yangi hujjatga havolalarni yangilash.
• Yangi hujjat kontekstiga qarab uslublarni sozlash.

Misol:

            class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
  }

  adoptedCallback(oldDocument, newDocument) {
    console.log('Komponent yangi hujjatga qabul qilindi!');
    console.log('Eski Hujjat:', oldDocument);
    console.log('Yangi Hujjat:', newDocument);

    // Har qanday hujjatga xos havolalarni shu yerda yangilang
    // Masalan, agar sizda eski hujjatdagi global o'zgaruvchiga havola bo'lsa,
    // siz uni yangi hujjatning global o'zgaruvchisiga yangilashingiz kerak bo'lishi mumkin.
  }

  connectedCallback() {
    this.shadow.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #ccc;
          padding: 10px;
        }
      </style>
      <p>MyComponent'dan salom!</p>
    `;
  }
}

customElements.define('my-component', MyComponent);

            

              
                Copy
              
            
          

adoptedCallback'ni ishga tushirish uchun siz komponentni bir hujjatdan boshqasiga, masalan, uni iframe hujjatiga qo'shish orqali ko'chirishingiz kerak bo'ladi.

Web Komponent Hayot Siklini Boshqarish bo'yicha Eng Yaxshi Amaliyotlar

Web Komponent hayot sikli bilan ishlashda yodda tutish kerak bo'lgan ba'zi eng yaxshi amaliyotlar:

• Shadow DOM'dan foydalaning: Atrofdagi hujjat bilan ziddiyatlarning oldini olish uchun komponentingizning ichki tuzilishi, uslubi va xatti-harakatini Shadow DOM yordamida inkapsulyatsiya qiling.
• Atributlarni kuzatib boring: Komponent atributlaridagi o'zgarishlarga javob berish va UI'ni mos ravishda yangilash uchun observedAttributes getter'i va attributeChangedCallback'dan foydalaning.
• Resurslarni tozalang: Xotira sizib chiqishi va kutilmagan xatti-harakatlarning oldini olish uchun disconnectedCallback'da komponent foydalanayotgan hodisa tinglovchilari, taymerlar va tarmoq so'rovlari kabi har qanday resurslarni tozalashga ishonch hosil qiling.
• Maxsus imkoniyatlarni (Accessibility) hisobga oling: Tegishli ARIA atributlarini taqdim etish va komponentning klaviatura orqali boshqarilishini ta'minlash kabi maxsus imkoniyatlar bo'yicha eng yaxshi amaliyotlarga rioya qilgan holda komponentlaringiz nogironligi bo'lgan foydalanuvchilar uchun qulay ekanligiga ishonch hosil qiling.
• Yig'ish vositasidan foydalaning: Web Komponentlaringizni birlashtirish va ularni ishlab chiqarish uchun optimallashtirish uchun Rollup yoki Webpack kabi yig'ish vositasidan foydalanishni o'ylab ko'ring. Bu ishlashni yaxshilashga va komponentlaringiz hajmini kamaytirishga yordam beradi.
• Puxta sinovdan o'tkazish: Komponentning turli stsenariylarda kutilganidek ishlashini ta'minlash uchun birlik (unit) va integratsiya testlarini amalga oshiring. Barcha hayot sikli usullarini qamrab olish uchun testlarni avtomatlashtiring.

Web Komponent Dizayni uchun Global Mulohazalar

Global auditoriya uchun Web Komponentlarni loyihalashda quyidagilarni hisobga olish muhim:

• Mahalliylashtirish: Bir nechta til va mintaqalarni qo'llab-quvvatlash uchun xalqarolashtirishni (i18n) amalga oshiring. Tarjimalarni boshqarish uchun resurs fayllari yoki tashqi kutubxonalardan foydalaning. Masalan, sana tanlash komponenti sanalarni foydalanuvchining afzal ko'rgan formatida ko'rsatishi kerak (masalan, AQShda OY/KUN/YIL, Yevropada KUN/OY/YIL).
• O'ngdan-chapga (RTL) qo'llab-quvvatlash: Komponentlaringiz arab va ibroniy kabi RTL tillarini qo'llab-quvvatlashiga ishonch hosil qiling. Joylashuvni aks ettirishni boshqarish uchun CSS mantiqiy xususiyatlaridan foydalaning (masalan, margin-left o'rniga margin-inline-start).
• Madaniy sezgirlik: Komponentlaringizni loyihalashda madaniy farqlarni yodda tuting. Ba'zi madaniyatlarda haqoratli yoki nomaqbul bo'lishi mumkin bo'lgan rasm yoki belgilardan foydalanishdan saqlaning.
• Vaqt zonalari va valyutalar: Sanalar, vaqtlar yoki valyutalarni ko'rsatganda, foydalanuvchining mahalliy vaqt zonasi va valyutasidan foydalanishga ishonch hosil qiling. Ushbu qiymatlarni to'g'ri formatlash uchun Intl kabi kutubxonalardan foydalaning.
• Maxsus imkoniyatlar (Accessibility): Komponentlaringiz butun dunyodagi nogironligi bo'lgan foydalanuvchilar uchun qulay bo'lishini ta'minlash uchun WCAG ko'rsatmalariga rioya qiling.

Xulosa

Web Komponent hayot siklini tushunish mustahkam, qayta ishlatiladigan va qo'llab-quvvatlanadigan veb-ilovalar yaratish uchun zarurdir. Hayot sikli qayta chaqiruvlaridan foydalanib, siz komponent holatini samarali boshqarishingiz, o'zgarishlarga javob berishingiz va resurslarni tozalashingiz mumkin. Eng yaxshi amaliyotlarga rioya qilish va global omillarni hisobga olish orqali siz butun dunyo bo'ylab foydalanuvchilar uchun qulay va foydalanishga yaroqli Web Komponentlarni yaratishingiz mumkin. Veb-dasturlash rivojlanishda davom etar ekan, Web Komponentlar murakkab va kengaytiriladigan veb-ilovalarni yaratishda tobora muhim rol o'ynaydi. Ularni qabul qiling, ularning hayot siklini o'zlashtiring va ularning salohiyatini oching!